<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet">
</head>

<body>


    <div id="content" class="container-fluid">

    </div>
    <script id="items-template" type="text/x-handlebars-template">
        <table class="table table-hover">
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">日期</th>
                <th scope="col">开发者</th>
                <th scope="col"  style="min-width:80px">版本号</th>
                <th scope="col">详情</th>
              </tr>
            </thead>
            <tbody>
                    {{#each list}}
                    <tr> 
                        <td>{{@index}}</td>
                        <td>{{date}}</td>
                        <td>{{author}}</td>
                        <td>{{version}}</td>
                        <td>{{decription}}</td>
                     </tr>
                    {{/each}}
            </tbody>
          </table>
    </script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/handlebars.js/4.0.11/handlebars.min.js"></script>
    <script type="text/javascript">
        $.ajax({
            url: '/get_items',
            method: 'GET',
            type: 'json',
            success: function (res) {
                $('#content').html(Handlebars.compile($('#items-template').html())({ list: res }))
            }
        })
    </script>
</body>

</html>